<!-- src/components/TodoList.vue -->
<template>
  <ul id="list">
    <TodoItem
      v-for="(task, index) in tasks"
      :key="index"
      :task="task"
      :index="index"
      @toggle="onToggle"
      @delete="onDelete"
    />
  </ul>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import TodoItem from './TodoItem.vue';

// 接收父组件传递的任务列表
const props = defineProps({
  tasks: {
    type: Array,
    required: true
  }
});

// 定义转发给父组件的事件
const emit = defineEmits(['update-task', 'delete-task']);

// 转发切换事件
const onToggle = (index) => {
  emit('update-task', index);
};

// 转发删除事件
const onDelete = (index) => {
  emit('delete-task', index);
};
</script>